<template>
	<div class="detail">
		<header> <span class="fanhui" @click="fanhui()">&lt; </span>详情</header>
        <div class="content">
            <div class="img">
                <img :src="detail.pimg" alt="" srcset="">
            </div>
            <div class="pri">
                <span class="sp">{{ detail.pname }}</span>
                <span class="sp1">￥{{ detail.pprice }}</span>
            </div>
            <div class="aa">
                <div class="num">数量<h3 class="jian">-</h3><span class="shu">99</span><h3 class="jia">+</h3></div>
                <div class="cc">
                    <p>尺寸</p>
                    <div class="ul">
                        <p></p>
                        <hr>
                        <ul>
                            <li>30cm</li>
                            <li>40cm</li>
                            <li>50cm</li>
                            <li>60cm</li>
                            <li>70cm</li>
                        </ul>
                    </div>
                    
                </div>
                <div class="cc">
                    <p>颜色</p>
                    <ul class="dd">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>    
                </div>
                <div class="cc">
                    <p>配送至</p>
                    <span class="apa">广东省深圳市南山区一隅清欢设计工作室</span>
                   
                </div>
            </div>
            <div class="bottom">确认</div>
            
        </div>
		<!-- <section>
			<h1>{{detail}}</h1>
		</section> -->

	</div>
</template>

<script>
	import axios from 'axios';
	export default{
		name:'Detail',
		data(){
			return{
				detail:""
			}
		},
		methods:{
			fanhui(){
				this.$router.go(-1)
			}
		},
		mounted(){
			var _this=this;
			axios({
				method:'get',
				url:'http://jx.xuzhixiang.top/ap/api/detail.php',
				params:{uid:'11475',id:_this.$route.params.id}
			}).then((data)=>{
                _this.detail=data.data.data;
                console.log(data.data.data)
			})
		}
	}
</script>

<style>
	.detail{
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	header{
		height: 50px;
		line-height: 50px;
		background: yellowgreen;
		text-align: center;
	}
	section{
		flex: 1;
	}
	.fanhui{
		  position: absolute;
   		 left: 20px;
   		 color: #fff;
   		 font-size: 25px;
	}
    .content{
        width: 100%;
        height: 90%;
    }
    .img img{
        width: 100%;
        height: 42%;
         margin-top: 5%
    }
    .pri{
        width: 92%;
        height: 3%;
        margin:5% 0;
        padding: 0 4%
    }
    .pri .sp{
        width: 60%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        font-size: 16px !important;
        float: left;
    }
    .pri .sp1{
        width: 15%;
        float: right;
        line-height: 21px;
        color: #cccccc;
    }
    .aa{
        padding: 0 4%;
        height: 41%;
    }
    .aa .num{
        height: 20%;
        line-height: 65px;
        font-size: 15px !important;
    }
    .aa h3{
        display: inline-block
    }
    .aa .jian{
        margin-left: 25px
    }
    .aa .shu{
        margin: 0 20px;
        font-size: 20px
    }
    .cc p{
        font-size: 15px !important;
        margin-bottom: 16px;
    }
    .cc ul{
        display: flex;
        justify-content: space-around;
        font-size: 13px !important;
        height: 12%; 
        width: 100%;
        margin-top: 3%;
    }
    .ul{
        position: relative;
    }
    .ul p{
        width: 16px;
        height: 16px;
        background: #cccccc;
        border-radius: 50%;
        position: absolute;
        top: -6px;
        left: 93px;
    }
    .cc .dd li{
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #F0E7D1
    }
    .cc .dd{
        width: 80%
    }
    .apa{
        margin-left: 16px;
    }
    .bottom{
        width: 100%;
        height: 10%;
        background: #F0E7D1;
        line-height: 73px;
        text-align: center;
         font-size: 18px !important;
    }
</style>